<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose title="课日调整" :width="800" :height="300" @ok="handleSubmit">
      <BasicForm @register="registerForm"/>
  </BasicModal>
</template>

<script lang="ts" setup>
    import {ref} from 'vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import {BasicForm, useForm} from '/@/components/Form/index';
    import {swapcourse} from '../CsSubjectOrder.api';

    // Emits声明
    const emit = defineEmits(['register','success']);
    const isUpdate = ref(true);
    //表单配置
    const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({
        //labelWidth: 150,
        schemas: [
            {
                label: '调课方式',
                field: 'targetType',
                component: 'RadioButtonGroup',
                componentProps:{
                    options:[
                        {label: '按学生',value :0},
                        {label: '按科目',value :1}
                    ],
                },
                defaultValue: 0
            },
            {
                label: '科目',
                field: 'courseIds',
                component: 'JSelectMultiple',
                componentProps:{
                    dictCode:"cs_courses where del_flag=0,name,id"
                },
                show: ({values})=>{
                    return values.targetType==1;
                },
                required:({values})=>{
                    return values.targetType==1;
                },
                    // colProps: {span: 8},

            },
            {
                label: '学生',
                field: 'personId',
                component: 'JSelectPerson',
                componentProps:{
                    showButtom:false
                },
                show: ({values})=>{
                    return values.targetType==0;
                },
                required:({values})=>{
                    return values.targetType==0;
                },
                // colProps: {span: 8},
            },
            {
                label: '调课日期',
                field: 'attendDate',
                component: 'DatePicker',
                required:true,
                componentProps: {
                    format:'YYYY-MM-DD',
                    valueFormat:'YYYY-MM-DD',
                    //是否显示今天按钮
                    showToday:true
                }
            },
            {
                label: '待调日期',
                field: 'toAttendDate',
                component: 'DatePicker',
                required:true,
                componentProps: {
                    format:'YYYY-MM-DD',
                    valueFormat:'YYYY-MM-DD',
                    //是否显示今天按钮
                    showToday:true
                }
            },
        ],
        showActionButtonGroup: false,
        baseColProps: {span: 12}
    });
    //表单赋值
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        //重置表单
        await resetFields();
        setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
        isUpdate.value = !!data?.isUpdate;
        //表单赋值
        await setFieldsValue({
            ...data.record,
        });
        // 隐藏底部时禁用整个表单
       setProps({ disabled: !data?.showFooter })
    });
    //表单提交事件
    async function handleSubmit() {
        try {
            let values = await validate();
            setModalProps({confirmLoading: true});
            //提交表单
            await swapcourse(values);
            /*
            await swapcourse(values).then(res=>{
                console.log(res)
                createMessage.success(res + '条记录发生改变');

            });
            */
            //关闭弹窗
            closeModal();
            //刷新列表
            emit('success');
        } finally {
            setModalProps({confirmLoading: false});
        }
    }
</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number){
		width: 100%
	}

	:deep(.ant-calendar-picker){
		width: 100%
	}
</style>